<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String basePath = request.getContextPath();
  Object email = request.getSession().getAttribute("email");
%>
<!DOCTYPE html>
<html>
<head>
  <title>劉員外</title>

  <jsp:include page="jsp/common/common-css.jsp"></jsp:include>
  <jsp:include page="jsp/common/common-js.jsp"></jsp:include>

  <script src="<%=basePath%>/plugin/imgshow/jquery.glide.min.js"></script>
  <link rel="stylesheet" type="text/css" href="<%=basePath%>/plugin/imgshow/style.css">


  <style type="text/css">
    a {
      text-decoration: none
    }

    a:hover {
      text-decoration: none
    }

    a:link {
      text-decoration: none
    }

    a:visited {
      text-decoration: none
    }

    * {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .slide {
      padding: 40px 0px;
    }

  </style>
</head>

<body style="background-color: #f9f9f9;">
<jsp:include page="head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 0px">
  <div class="row-fluid" style="padding: 0px">
    <!-- 代码 开始 -->
    <div class="slider">
      <ul class="slides">
        <li class="slide" style="background-color: #663366;">
          <table style="width: 100%;">
            <tr>
              <td align="center" valign="middle" style="padding: 0px 20px">
                <img src="<%=basePath%>/img/function.png" class="img-responsive">
              </td>
            </tr>
            <tr>
              <td align="center"><p style="color: #ffffff;padding-top: 50px;font-size: large;font-weight: lighter">B端后台&nbsp;C端交互</p>
              </td>
            </tr>
          </table>
        </li>
        <li class="slide" style="background-color: #3399CC;">
          <table style="width: 100%">
            <tr>
              <td align="center" valign="middle" style="padding: 0px 20px">
                <img src="<%=basePath%>/img/devices.png" class="img-responsive">
              </td>
            </tr>
            <tr>
              <td align="center"><p style="color: #ffffff;padding-top: 50px;font-size: large;font-weight: lighter">
                多终端自动适配</p></td>
            </tr>
          </table>
        </li>
      </ul>
    </div>
    <!-- 代码 结束 -->
    <%--商品--%>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
      <div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 "></div>
      <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 product" style="padding: 0px"></div>
    </div>
    <%--资讯--%>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
      <div class="col-xs-0 col-sm-0 col-md-1 col-lg-1 "></div>
      <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 story" style="padding: 0px">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin: 20px 0px;">
          <h3>实时资讯</h3>
          <hr style="width: 100%">
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="incomeModal" role="dialog" style="margin-top: 10%;">
  <div class="modal-dialog modal-sm" style="">
    <div class="modal-content" style="">
      <div class="modal-header" align="center">
        收益明细
      </div>
      <div class="modal-body">
        <p>购买返现：￥<span id="part1" style="font-size: x-large;" class="text-default-color"></span></p>

        <p>邀请购买提成：￥<span id="part2" style="font-size: x-large;" class="text-default-color"></span></p>
      </div>
      <div class="modal-footer">
        <p>
          <a class="btn btn-default" data-dismiss="modal">了解</a>
        </p>
      </div>
    </div>
  </div>
</div>
<jsp:include page="foot.jsp"></jsp:include>
</body>
<script>

  function toProduct(productId) {
    var url = '<%=basePath%>/order/preadd?productId=' + productId;
    window.location.href = url;
  }
  function syncLogin() {
    var email = "<%=email%>";
    if (email == null || email == "null" || email == "") {
      email = getCookie("email");
      if (email == null || email == "null" || email == "") {
        return;
      }
      var login = getCookie("login");
      if (login == null || login == "null" || login == "") {
        return;
      }
      var url = "<%=basePath%>/user/fakeLogin";
      var param = {email: email, login: login};
      $.post(url, param, function (data, status) {
        data = JSON.parse(data);
        if (data.code == 200) {
          // - 异步登录成功设置email隐藏域的值
          $("#email").val(email);
          // - 同步更新inCount
          setCookie("inCount", data.data.inCount);
        }
      })
    }
  }

  function buildProduct(productExt) {
    var type = productExt.type;
    var typeRemark = productExt.remark;
    var list = productExt.list;
    var temp = '';
    var item = '';
    item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="margin:20px 0px">'
    item += '<h3>' + type + '</h3>'
    item += '<hr style="width:100%">'
    item += '</div>'
    for (var i = 0; i < list.length; i++) {
      var name = list[i].name;
      var url = list[i].url;
      var price = list[i].price;
      var sales = list[i].sales;
      var inventory = list[i].inventory;
      var remark = list[i].remark;
      var productId = list[i].id;
      var inventory = list[i].inventory;
      url += '-580x350';
      item += '<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">';
      item += '<a href="javascript:toProduct(' + productId + ');">';
      item += '<div class="panel panel-default"style="border: none;background-color: #ffffff;">';
      item += '<div class="panel-heading"style="background-color: #ffffff;border: none;padding: 0px">';
      item += '<img src="' + url + '" class="img-responsive">';
      item += '</div>';
      item += '<div class="panel-body"style="padding: 15px">';
      item += '<p style="font-weight: bold;color: #444444">' + name + '</p>';
      item += '<p>' + remark.substr(0, 10) + '......</p>';
      item += '</div>';
      item += '<div class="panel-footer"style="background-color: #ffffff;border: none">';
      item += '<table style="width: 100%">';
      item += '<tr><td colspan="2"><hr style="width: 100%"></td></tr>';
      item += '<tr>';
      item += '<td><a href="javascript:calIncome(' + productId + ');"><i class="icon-hand-right" style="color: red;font-weight: bold"></i>&nbsp;计算收益</a></td>';
      if (inventory == 0) {
        item += '<td align="right"><span class="label label-default" style="">已卖完</span></td>';
      } else {
        item += '<td align="right"><h2 style="margin: 0px;"class="text-default-color"><small>￥</small>' + price + '</h2></td>';
      }
      item += '</tr>';
      item += '<tr>';
      item += '</table>';
      item += '</div>';
      item += '</div>';
      item += '</a>';
      item += '</div>';
      temp += item;
      item = '';
    }
    return temp;
  }
  function calIncome(productId) {
    var url = '<%=basePath%>/product/calIncome?productId=' + productId;
    $.post(url, function (data, status) {
      if (status == 'success') {
        $("#part1").text(data.part1);
        $("#part2").text(data.part2);
        $("#incomeModal").modal();
      } else {
        alerErr('计算失败');
      }
    })
  }
  function buildStory(title, subTitle, readCount, imgUrl, storyId, tag) {
    imgUrl += '-580x350';
    var item = '';
    item += '<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">';
    item += '<a href="<%=basePath%>/story/info?uuid=' + storyId + '">';
    item += '<div class="panel panel-default"style="background-color: #ffffff;border: none">';
    item += '<div class="panel-body"style="background-color: #ffffff;border: none;padding: 0px">';
    item += '<p><img src="' + imgUrl + '" class="img-responsive"></p>';
    item += '<p class="text-left"style="padding: 15px;font-weight: bold;color: #444444">';
    item += title.substr(0, 10) + '...';
    item += '</p>';
    item += '<p class="text-left"style="padding:0px 15px;">';
    item += subTitle.substr(0, 10) + '...';
    item += '</p>';
    item += '</div>';
    item += '<div class="panel-footer"style="background-color: #ffffff;border: none">';
    item += '<hr>';
    item += '<table style="width: 100%">';
    item += '<tr>';
    item += '<td><span class="badge" style="background-color: #CC66CC">' + tag + '</span></td>';
    item += '<td align="right"style="color: #666666">阅读：' + readCount + '</td>';
    item += '<tr>';
    item += '</table>';
    item += '</div>';
    item += '</div>';
    item += '</a>';
    item += '</div>';
    return item;
  }


  function loadProduct() {
    var url = "<%=basePath%>/product/list";
    var param = {pageNo: 1, pageSize: 10, soldOut: 0};
    $.post(url, param, function (data, status) {
      if (data.length == 0) {
        var temp = '<div style="padding: 100px 0px;color: #d3d3d3;"class="text-center">No Goods Here</div>';
        $('.product').append(temp);
      } else {
        for (var i = 0; i < data.length; i++) {
          var clazz = '.product';
          var productExt = data[i];
          $(clazz).append(buildProduct(productExt));
        }
      }
    })
  }
  function loadStory() {
    var url = "<%=basePath%>/story/list";
    var param = {pageNo: 1, pageSize: 8, storyType: 0};
    $.post(url, param, function (data, status) {
      if (data.length == 0) {
        var temp = '<div style="padding: 100px 0px;color: #d3d3d3;"class="text-center">Nothing Here</div>';
        $('.story').append(temp);
      } else {
        for (var i = 0; i < data.length; i++) {
          var clazz = '.story';
          $(clazz).append(buildStory(data[i].title, data[i].subTitle, data[i].readCount, data[i].imgUrl, data[i].uuid, data[i].tag));
        }
      }
    })
  }

  $(function () {
    initStyle();
    syncLogin();
    loadProduct();
    loadStory();
    $('.slider').glide({
//      autoplay: true,//是否自动播放 默认值 true如果不需要就设置此值
      animationTime: 500, //动画过度效果，只有当浏览器支持CSS3的时候生效
      arrows: false, //是否显示左右导航器
      arrowRightText: ">",//定义左右导航器文字或者符号也可以是类
      arrowLeftText: "<",
      nav: true, //主导航器也就是本例中显示的小方块
      navCenter: true, //主导航器位置是否居中
      navClass: "slider-nav",//主导航器外部div类名
      navItemClass: "slider-nav__item", //本例中小方块的样式
      navCurrentItemClass: "slider-nav__item--current" //被选中后的样式
    });
  })
</script>
</html>
